<template>
	<div class="section" ref="parent">
		<div class="border-row"></div>
		<div class="border-col"></div>
		<div class="section-header">驻温高校近三年不同学历毕业人数趋势</div>
		<div ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
	</div>
</template>
<script>
import { getNumberOfGraduatesByEducation } from '@/api/data';
export default {
	props: ['height', 'dateProp'],
	data() {
		return {
			chartsDom: null,
			jz:true,
			chartsData: {
				years: ['', '', ''],
				datas: [
					[],
					[],
					[],
					[]
				]
			}
		};
	},
	computed: {
		setStyle: {
			get() {
				return this.$refs.parent.offsetWidth;
			},
			set(val) {
				this.chartsDom = {
					width: val - 30 + 'px',
					height: this.height - 30 - 31 + 'px',
					'z-index': 100,
					position: 'relative'
					// 'background-color': 'red'
				};
			}
		}
	},
	mounted() {
		this.setStyle = this.setStyle;
		this.$nextTick(_ => {
			this.init();
		});
	},
	methods: {
		init() {
			this.jz=false
			getNumberOfGraduatesByEducation(this.dateProp).then(({ data: { data } }) => {
				this.jz=true
				console.log('getNumberOfGraduatesByEducationgetNumberOfGraduatesByEducationgetNumberOfGraduatesByEducation')
				console.log(data);
				if (data && data.length > 0) {
					this.chartsData = {years: [], datas: [[], [], [], []]};
					for(var i=0;i<data.length;i++){
						this.chartsData.years.push(data[i].name);
						this.chartsData.datas[0].push(data[i].value[0].value);
						this.chartsData.datas[1].push(data[i].value[1].value);
						this.chartsData.datas[2].push(data[i].value[2].value);
						this.chartsData.datas[3].push(data[i].value[3].value);
					}
					console.log(this.chartsData);
				}else{
					
				}
				this.chartInit();
			});
		},
		chartInit() {
			let data = [['2016', 116], ['2017', 129], ['2018', 135], ['2019', 86], ['2020', 73]];

			var dateList = data.map(function(item) {
				return item[0];
			});
			var valueList = data.map(function(item) {
				return item[1];
			});
			let option = {
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					textStyle:{
					color:['#5793f3', '#d14a61', '#cccccc',"#ff0000"]
					},
					 itemWidth:60,
						data: ['专科', '本科', '硕士', '博士']
					},
				xAxis: {
					data: this.chartsData.years,
					splitLine: {
						show: false
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: 'rgba(255,255,255,.3)'
						}
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						textStyle: {
							color: '#8ebafb'
						}
					}
				},
				yAxis: {
					splitLine: {
						show: false
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: 'rgba(255,255,255,.3)'
						}
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						textStyle: {
							color: '#8ebafb'
						}
					}
				},
				grid: {
					bottom: '25',
					top: '30'
				},
				series: [
					{
						type: 'line',
						name:'专科',
						showSymbol: false,
						data: this.chartsData.datas[0]
					},
					{
						type: 'line',
						name:'本科',
						showSymbol: false,
						data: this.chartsData.datas[1]
					},
					{
						type: 'line',
						name:'硕士',
						showSymbol: false,
						data: this.chartsData.datas[2]
					},
					{
						type: 'line',
						name:'博士',
						showSymbol: false,
						data: this.chartsData.datas[3]
					}
				],
				color: ['#37a2da', '#67e0e3', '#ffdb5c', '#ff9f7f']
			};
			let chart = this.$echarts.init(this.$refs.charts);
			chart.setOption(option);
		}
	}
};
</script>
<style lang="stylus" scoped>
.section
	width 100%
	height 100%
	margin-top 20px
</style>
